<template>
    <div style="background-color: #F5F5F5">
        <el-card
                style="position: fixed;display: flex;flex-direction: column;align-items: center;justify-content: space-between">
            <el-card v-for="item in countBlog" style="width: 100%;height: 100%">
                <el-badge style="width: 100%;height: 100%" :value="item.count" class="item" type="primary">
                    <el-button @click="getData(item.createTime)" size="small">{{item.year}}年{{item.month}}月</el-button>
                </el-badge>
            </el-card>


        </el-card>
        <div style="display: flex;justify-content: center">
            <div>
                <el-card v-for="item in blogList" class="el-card-body">
                    <div class="el-card-header">
                        <a class="atitle" style="font-size: 16px;color: #303133;font-weight: 200;cursor: pointer"
                           @click="toDetail(item.id)">{{item.title}}</a>
                        <span style="color:#A6A6BA;font-size: 12px ">                        <i
                                class="el-icon-view"></i>{{item.views}}</span>
                    </div>
                    <div class="el-card-describe" style="font-size: 15px">{{item.description}}</div>
                    <div class="el-card-footer">
                        <span style="font-size: 12px;color: #A6A6AE">{{item.nickname}}</span>
                        <div>
                            <el-tag v-for="item1 in item.tagList" style="margin-right: 10px" size="mini">{{item1}}
                            </el-tag>
                        </div>
                        <span class="time"><i
                                class="el-icon-time"></i> {{item.year}}年{{item.month}}月{{item.day}}日</span>
                    </div>
                </el-card>


            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Archive",
        methods: {
            toDetail(id) {
                console.log(id);
                this.$router.push({
                    name: 'Detail',
                    query: {
                        id: id
                    }
                })
            },
            async getCountBlog() {
                const {data: res} = await this.$http.get('/blog/index/countblog')
                // console.log(res);
                this.countBlog = res.data;
                let createTime = this.$route.query.createTime
                if (createTime) {  // 如果是从首页来的就有时间戳
                    this.getBlogArchive(createTime); // 默认选中最新的时间

                } else {
                    this.getBlogArchive(res.data[res.data.length - 1].createTime); // 默认选中最新的时间
                }
            },
            async getBlogArchive(time) {
                const {data: res} = await this.$http.get('/blog/archive/' + time);
                this.blogList = res.data.data;
                console.log(res)
                console.log(res.data.data);
                // console.log(this.blogList.day);
                // console.log(this.blogList.length)

            },
            getData(time) {
                this.getBlogArchive(time);
                // console.log(time);
            }

        }, data() {
            return {
                countBlog: [],  // 博客归档数据
                blogList: []
            }
        },
        created() {
            this.getCountBlog();

        }
    }
</script>

<style lang="less" scoped>
    .el-card-header {
        a {
            text-decoration: none;
            /*color: ;*/
        }

        a:hover {
            color: #ECF5FF;
        }
    }

    a:hover {
        color: #40A1FF !important;
        /*background-color: pink!important;*/

    }

    .head {
        width: 100%;
        /*min-width: 1300px;*/
        /*background-color: pink;*/
        height: 61px;

    }

    .el-card-body {
        box-sizing: border-box;
        margin-top: 10px;
        width: 638px;
        /*112*/
        height: 111px;
        transition: all 0.5s;

    }

    .el-card-body:hover {
        transform: scale(0.9);
        box-shadow: 0px 5px 10px 3px #D1D1D1;
    }

    .el-card-header {
        display: flex;
        justify-content: space-between;
    }

    .el-card-footer {
        margin-top: 10px;
        /*margin-right: ;*/
        display: flex;
        justify-content: space-between;

    }

    .el-card-describe {
        margin-top: 10px;
    }

    .time {
        font-size: 12px;
        color: #A6A6BA;
    }

    /*右侧部分布局    */
    .right {
        margin-left: 20px;

        .myself {
            width: 298px;
            height: 180.6px;
        }
    }

    .advertisement {
        margin-top: 10px;
    }

    .newAritle {
        width: 298px;
    }

    .newlink {
        a {
            color: #40A1FF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    }

    .newAritle {
        margin-top: 10px;
    }

    .guidang {
        width: 298px;
        margin-top: 10px;

        .riqi {
            a {
                color: #78B6F7;
                text-decoration: none;
            }
        }
    }

    /*    index*/
</style>